<template>
  <div>
    <el-card class="w_100" v-loading="spinning">
      <template #header>
        <header>
          <div class="left">街道/镇合格证打印数量统计</div>
          <div class="right">
            <el-button @click='handleExportXlsMy' type="primary" size="small">下载</el-button>
            <el-select v-model="queryParam.selectUnitId" size="mini" style="width: 120px;margin-left:10px;"
                       @change='unitIdClick' placeholder="请选择区域"
                       v-hasPermi="['nongjt:user:list']" >
              <el-option v-for="{id,area} of unitList" :key="id" :label="area" :value="id">
              </el-option>
            </el-select>
            <el-select v-model="queryParam.selectYear"  @change='yearSelect' size="mini" style="width: 80px;margin-left: 10px;"
                       placeholder="请选择年份">
              <el-option v-for="temp of yearList" :key="temp" :label="temp" :value="temp">
              </el-option>
            </el-select>
            <el-date-picker :clearable="false"
                            v-model="queryParam.selectYearMonth" value-format="yyyy-MM" style="width: 110px;margin-left: 10px;"
                            type="month" size="mini" placeholder="请选择月份">
            </el-date-picker>
          </div>
        </header>
      </template>
      <div id='StreetCharts' style='height: 300px;width: 100%;'></div>
    </el-card>
  </div>
</template>

<script>
const echarts = require('echarts')
import {echartResizeMixins} from "@/views/certificate/charts/echartResizeMixins";
import {getActionSimple} from "@/utils/axiosUtils";
import dayjs from "dayjs";
import {mapGetters} from "vuex";

export default {
  name: 'StreetCharts',
  mixins: [echartResizeMixins],
  data() {
    return {
      title: '街道/镇合格证打印数量统计',
      url: {
        streetStatistics: '/certificate/certificate_count/streetStatisticsByArea',
        exportXlsUrl: '/certificate/certificate_count/exportXlsStreetStatistics',
        userStreetList: '/certificate/certificate_count/getUserStreetAll',
      },
      //加载动画相关
      spinning: false,
      //查询参数
      queryParam: {
        //默认年份
        selectYear: new Date().getFullYear(),
        //默认年月
        selectYearMonth: null,
        //选中的单位id
        selectUnitId: null
      },
      //图表相关
      chart: null,
      //总量
      total:0,
    }
  },
  created() {
    this.queryParam.selectUnitId = this.selectUnitId
    setTimeout(() => {
      let param = { yearStr: this.queryParam.selectYear + '-01-01' ,unitId:this.queryParam.selectUnitId};
      this.initChart(param)
    }, 500);
  },
  methods: {
    //初始化图表
    async initChart(param) {
      let _this = this
      if (!this.chart) {
        const dom = document.querySelector('#StreetCharts')
        this.chart = echarts.init(dom)
        this.chart.on('click', function (params) {
          const {data} = params
          // let selectTime = _this. queryParam.selectYear
          let selectTimeMoment = _this.queryParam.selectYearMonth
          let dateBegin
          let dateEnd
          if (selectTimeMoment) {
            // selectTime = selectTime.substring(0,7);
            dateBegin = selectTimeMoment.format('YYYY-MM') + '-01'
            // dateEnd = selectTime +'-31'
            let daysInMonth = selectTimeMoment.daysInMonth()
            dateEnd = selectTimeMoment.format('YYYY-MM') + '-' + daysInMonth
          } else {
            dateBegin = _this.queryParam.selectYear + '-01-01'
            dateEnd = _this.queryParam.selectYear + '-12-31'
          }
          // let dateBegin = selectTime + '-01-01'
          // let dateEnd = selectTime + '-12-31'
          _this.$router.push({path: 'certificate/certificate?country=' + data.name + '&dateBegin=' + dateBegin + '&dateEnd=' + dateEnd});
        })
      }
      let result = await getActionSimple(this.url.streetStatistics, param)
      let option = {
        title: {
          text: '街道/镇合格证打印统计',
          subtext: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        toolbox: {
          feature: {
            saveAsImage: { show: true }
          }
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data:result,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      //展示统计数量
      const countArray = result.map(t => t.value)
      this.total = countArray.reduce((pre, cur) => pre + cur, 0)
      option.title.text = this.title + "(" + this.total + ")"
      //设置子标题 展示查询的日期
      this.setChartsSubtext(option)
      this.chart.setOption(option)
    },
    //年份选择事件
    yearSelect(year) {
      let param = {
        yearStr: year,
        unitId:this.queryParam.selectUnitId
      }
      this.initChart(param)
      //清空月份
      this.queryParam.selectYearMonth = null
    },
    //区域选择事件
    unitIdClick(n) {
      if (n) {
        let param = {
          yearMonthStr: this.queryParam.selectYearMonth,
          unitId: n,
          yearStr:this.queryParam.selectYear
        }
        this.initChart(param)
      }
    },
    //设置图表子标题
    setChartsSubtext(option) {
      let param = {
        yearMonthStr: this.queryParam.selectYearMonth,
        unitId:this.queryParam.selectUnitId,
        yearStr:this.queryParam.selectYear
      }
      //设置子标题 展示查询的日期
      let { yearStr, yearMonthStr } = param
      if (yearMonthStr) {
        option.title.subtext = yearMonthStr.substring(0, 7)
      } else if (yearStr) {
        option.title.subtext = yearStr.substring(0, 4)
      } else {
        option.title.subtext = new Date().getFullYear()
      }
    },
    //导出
    async handleExportXlsMy() {
      this.spinning = true
      try {
        let param = {
          unitId:this.queryParam.selectUnitId,
          yearMonthStr:this.queryParam.selectYearMonth,
          yearStr:this.queryParam.selectYear
        }
        console.log("导出参数", param)
        this.download(this.url.exportXlsUrl, {
          ...param
        }, `区域合格证开具数量排名.xlsx`)
      } finally {
        this.spinning = false
      }
    }
  },
  computed:{
    ...mapGetters([
      'unitList',
      'selectUnitId',
      'yearList'
    ]),
  },
  watch: {
    //监听可查询的年限列表
    yearList(n) {
      if (n && n.length > 0) {
        const year = n[0]
        //更新双向绑定的年份
        this.queryParam.selectYear = year
      }
    },
    selectUnitId(n){
      if (n){
        this.queryParam.selectUnitId = n
      }
    },
    //监听年月的选择
    'queryParam.selectYearMonth'(n) {
      if (n) {
        let param = {
          yearMonthStr: n,
          unitId: this.queryParam.selectUnitId,
        }
        this.initChart(param)
      } else {
        const param = {
          unitId: this.queryParam.selectUnitId,
          yearMonthStr:dayjs().format("'YYYY-MM")
        }
        this.initChart(param)
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.w_100{
  width: 100%;
}
header{
  display: flex;
  justify-content: space-between;
  align-content: center;

  .left{
    font-weight: bold;
  }
}
</style>
